import React from 'react';

export class LifeCycle extends React.Component {
  state: {
    value: number;
  };
  // 挂载阶段：初始化
  constructor(props: any) {
    console.log('初始化');
    super(props);
    this.state = { value: 1 };
  }
  // 挂载阶段：渲染DOM结构
  render(): React.ReactNode {
    console.log('渲染DOM结构');
    const { state } = this;
    return <div onClick={() => this.setState({ value: state.value + 1 })}>LifeCycle --- {state.value}</div>;
  }
  // 挂载阶段：挂载完成
  componentDidMount(): void {
    console.log('挂载完成');
  }

  // 更新阶段：更新前（决定要不要更新，进行性能优化）
  shouldComponentUpdate(nextProps: any, nextState: any): boolean {
    console.log('更新前是否阻止渲染');
    const { state } = this;
    return state.value !== nextState?.value;
  }
  // 更新阶段：渲染DOM结构
  // render(): React.ReactNode { }
  // 更新阶段：更新后
  componentDidUpdate(prevProps: any, prevState: any, snapshot?: any): void {
    console.log('更新完成');
  }
  // 卸载阶段：卸载前
  componentWillUnmount(): void {
    console.log('组件卸载前');
  }

  // 错误处理阶段：报错后
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {}
}
